<template>
  <!-- 筛选区 -->
  <div class="sub-filter" v-if="!flagLoading">
    <!--  品牌标签筛选  -->
    <div class="item">
      <!-- 各筛选条件标题 -->
      <div class="head">品牌：</div>
      <div class="body">
        <a
          href="javascript:"
          v-for="item in screenData.brands"
          :key="item.id"
          :class="{ active: screenData.brandsId === item.id }"
          @click="handleBrandLight(item.id)"
        >
          {{ item.name }}
        </a>
      </div>
    </div>
    <!-- 品牌之外的标签筛选 -->
    <div class="item" v-for="item in screenData.saleProperties" :key="item.id">
      <!-- 各筛选条件标题 -->
      <div class="head">{{ item.name }}：</div>
      <div class="body">
        <a
          href="javascript:"
          v-for="i in item.properties"
          :key="i.id"
          :class="{ active: i.name === item.salePropertiesName }"
          @click="
            item.salePropertiesName = i.name;
            handleOtherLight(item.name, i.name);
          "
        >
          {{ i.name }}
        </a>
      </div>
    </div>
  </div>

  <!-- 骨架屏 -->
  <div class="sub-filter" v-if="flagLoading">
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="800px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
    <XtxSkeleton class="item" width="600px" height="40px" />
  </div>
</template>

<script>
import { getTwoScreen } from "../../api/category";
import { ref } from "vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";

export default {
  name: "SubFilter",
  setup() {
    // 存放二级分类筛选条件数据
    let { screenData, GetData, flagLoading } = fnGetTwoScreen();
    let { FlagOtherEnter, FlagBrandEnter } = fnDepositScreen();

    // 点击品牌标签，高亮
    const handleBrandLight = (brandId) => {
      // console.log("品牌标签高亮");
      screenData.value.brandsId = brandId;
      FlagBrandEnter(brandId);
    };

    // 点击其他标签，高亮
    const handleOtherLight = (tagGroupName, tagName) => {
      // console.log("其他标签高亮");
      let brandsId = screenData.value.brandsId;
      FlagOtherEnter(tagGroupName, tagName, brandsId);
    };

    // 当路由发生改变时触发
    onBeforeRouteUpdate((to) => {
      GetData(to.params.id);
    });

    return {
      screenData,
      handleBrandLight,
      handleOtherLight,
      flagLoading,
    };
  },
};

// 获取当前二级分类的筛选条件数据
function fnGetTwoScreen() {
  let screenData = ref([]);
  const route = useRoute();
  // 判断是数据获取中
  let flagLoading = ref(false);

  // 定义函数通过手动获取数据
  function GetData(id) {
    flagLoading.value = true;
    getTwoScreen(id).then((res) => {
      res.result.brands.unshift({ id: null, name: "全部" });
      res.result.saleProperties.forEach((item) => {
        // 将 '全部选项' 添加到标签筛选的第一位
        item.properties.unshift({ id: null, name: "全部" });
        // 设置默认高亮的标签
        item["salePropertiesName"] = "全部";
      });
      // 设置默认高亮的标签
      res.result["brandsId"] = null;
      screenData.value = res.result;
      // console.log(screenData.value);
      flagLoading.value = false;
    });
  }

  GetData(route.params.id);

  return {
    screenData,
    GetData,
    flagLoading,
  };
}

// 存放筛选数据
function fnDepositScreen() {
  // 定义对象存放筛选条件
  let obj = {
    brandId: null,
    attrs: [],
  };

  // 定义函数用于其他标签进入
  const FlagOtherEnter = (tagGroupName, tagName, brandsId) => {
    // console.log(tagGroupName, tagName, brandsId);
    obj.attrs.forEach((item, index) => {
      if (item.groupName === tagGroupName) {
        obj.attrs.splice(index, 1);
      }
    });

    obj.brandId = brandsId;
    obj.attrs.push({
      groupName: tagGroupName,
      propertyName: tagName,
    });

    // console.log(obj);
  };

  // 定义函数用于品牌标签进入
  const FlagBrandEnter = (brandId) => {
    obj.brandId = brandId;
  };

  return {
    FlagOtherEnter,
    FlagBrandEnter,
    obj,
  };
}
</script>

<style scoped lang="less">
// 筛选区
.sub-filter {
  background: #fff;
  padding: 25px;

  .item {
    display: flex;
    line-height: 40px;

    .head {
      width: 80px;
      color: #999;
    }

    .body {
      flex: 1;

      a {
        margin-right: 36px;
        transition: all 0.3s;
        display: inline-block;

        &.active,
        &:hover {
          color: @xtxColor;
        }
      }
    }
  }
}

// 骨架屏
.xtx-skeleton {
  padding: 10px 0;
}
</style>
